<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/share/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>详情</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<%@ include file="/WEB-INF/share/easyuilist.jsp"%>
<script src="${ctx }/admin/scripts/ajaxfileupload.js"></script>
<style>
.file{filter:alpha(Opacity=0);-moz-opacity:0;opacity: 0;top: 100px; width: 74px; height: 31px; display: inline-block; position: absolute;cursor:pointer;}
	
.ui-underline .ui-select-text {
	border: 1px solid #ccc !important;
}
</style>
<script type="text/javascript">
	var saveUrl = '${ctx}/subinfo/save';
	var keyValue = request('id');
	$(function() {
		$('#drivertype').ComboBox({
			description : "==请选择==",
			isuse : true
		}).bind("change", function () {
			ShowChapterAndSpecial();
        })
		$('#subtype').ComboBox({
			description : "==请选择==",
			isuse : true
		}).bind("change", function () {
			ShowChapterAndSpecial();
        })
        $('#chapterid').ComboBox({
			description : "==请选择==",
			isuse : true
        });
        $('#specialid').ComboBox({
			description : "==请选择==",
			isuse : true
        });
        $('#type').ComboBox({
			description : "==请选择==",
			isuse : true
        }).bind("change", function () {
    		var v = $(this).attr('data-value');
    		if(v=='1')$('#trAnswer').hide();
    		else $('#trAnswer').show();
        });
		
		var drivertype = '${chapter.drivertype}';
		var subtype = '${chapter.subtype}';
		var type = '${chapter.type}';
		if(drivertype)$('#drivertype').ComboBoxSetValue(drivertype);
		if(subtype)$('#subtype').ComboBoxSetValue(subtype);
		if(type){
			$('#type').ComboBoxSetValue(type);
    		if(type=='1')$('#trAnswer').hide();
    		else $('#trAnswer').show();
		}
		
		var img = '${chapter.img}';
		var jqimg = '${chapter.jqimg}';
		if(img)$('#imgimg').attr('src','${ctx}'+img);
		if(jqimg)$('#imgjqimg').attr('src','${ctx}'+jqimg);
		
		ShowChapterAndSpecial();
		
		var answertrues = '${chapter.answertrue}'.split(',');
		$.each(answertrues,function(index,value){
		     $('#answertrue'+value).prop('checked',true);
		});
		
		//初始化语音文件
		var mp3 = $('#mp3').val();
		if(mp3){
			var mp3s = mp3.split('?');
			var html = '<div class="attsep"><a style="color:#337ab7;width:300px;display:inline-block;" href="${ctx}' + mp3s[0] + '" target="_blank">' + mp3s[1] + '&nbsp;</a>&nbsp;&nbsp;<a class="delete" onclick="deleFileInfo(this,\'' + mp3s[0]  + '\',\'mp3\')" href="javascript:;;">删除</a></div>';
        	$('#musiccell').append(html);
		}
		var mp32 = $('#mp32').val();
		if(mp32){
			var mp32s = mp32.split('?');
			var html = '<div class="attsep"><a style="color:#337ab7;width:300px;display:inline-block;" href="${ctx}' + mp32s[0] + '" target="_blank">' + mp32s[1] + '&nbsp;</a>&nbsp;&nbsp;<a class="delete" onclick="deleFileInfo(this,\'' + mp32s[0]  + '\',\'mp32\')" href="javascript:;;">删除</a></div>';
        	$('#musiccell2').append(html);
		}
	})
	
	var chapterid = '${chapter.chapterid}';
	var specialid = '${chapter.specialid}';
	function ShowChapterAndSpecial(){
		var drivertype = $('#drivertype').attr('data-value');
		var subtype = $('#subtype').attr('data-value');
		if(!drivertype||!subtype)return;
		$.ajax({
    		type: "POST",
    		url: "${ctx}/subinfo/GetChapterSpecial",
    		data: {drivertype:drivertype,subtype:subtype},
    		dataType: "json",
    		success: function(data){
    			if(data.type==1){
    				var html = '';
    				$('#ulchapterid').empty();
    				for(var i=0,j=data.rows.chapter.length;i<j;i++){
    					html += '<li data-value="'+data.rows.chapter[i].id+'">'+data.rows.chapter[i].name+'</li>';
    				}
    				$('#ulchapterid').append(html);
    				$("#chapterid").ComboBox({
    		            description: "==请选择==",
    		            isuse:true
    		        })
    		        
    				var html2 = '';
    				$('#ulspecialid').empty();
    				for(var i=0,j=data.rows.special.length;i<j;i++){
    					html2 += '<li data-value="'+data.rows.special[i].id+'">'+data.rows.special[i].name+'</li>';
    				}
    				$('#ulspecialid').append(html2);
    				$("#specialid").ComboBox({
    		            description: "==请选择==",
    		            isuse:true
    		        })
    			}
    			else{
		            dialogMsg(data.message, 0);
    				$('#ulchapterid').empty();
    				$('#ulspecialid').empty();
    			}
    			$('#chapterid').ComboBoxSetValue(chapterid);
    			$('#specialid').ComboBoxSetValue(specialid);
    		}
    	});
	}
	//保存表单
	function AcceptClick() {
		if (!$('#form1').Validform()) {
			return false;
		}
		var postData = $('#form1').serialize();
		var drivertype = $('#drivertype').attr('data-value');
		var subtype = $('#subtype').attr('data-value');
		var chapterid = $('#chapterid').attr('data-value');
		var specialid = $('#specialid').attr('data-value');
		
		var type = $('#type').attr('data-value');
		postData+='&drivertype='+drivertype+'&subtype='+subtype;
		postData+='&chapterid='+chapterid+'&specialid='+specialid;
		postData+='&type='+type;
		$.SaveForm({
			url : saveUrl,
			param : postData,
			loading : "正在保存数据...",
			success : function(data) {
				$.currentIframe().$("#gridTable").trigger("reloadGrid");
			}
		})
	}
	
	function previewMusic(obj) {
        var n = $(obj).val();
        var option = {
            id: 'file', file: n,
            url:'${ctx}/upload/uploadfile?type=mp3&path=subinfo',
            callback: function (json) {
                if (json.success) {
              		$('#musiccell').empty();
                	var html = '<div class="attsep"><a style="color:#337ab7;width:300px;display:inline-block;" href="${ctx}' + json.rows.path + '" target="_blank">' + json.rows.name + '&nbsp;</a>&nbsp;&nbsp;<a class="delete" onclick="deleFileInfo(this,\'' + json.rows.path  + '\',\'mp3\')" href="javascript:;;">删除</a></div>';
                	$('#musiccell').append(html);
                	$("#mp3").val(json.rows.path+"?"+json.rows.name)
                }
                else {
    	            dialogMsg(json.message, 0);
                }
            }
        };
        upload(option);
    }
	function previewMusic2(obj) {
        var n = $(obj).val();
        var option = {
            id: 'file2', file: n,
            url:'${ctx}/upload/uploadfile?type=mp3&path=subinfo',
            callback: function (json) {
                if (json.success) {
              		$('#musiccell2').empty();
                	var html = '<div class="attsep"><a style="color:#337ab7;width:300px;display:inline-block;" href="${ctx}' + json.rows.path + '" target="_blank">' + json.rows.name + '&nbsp;</a>&nbsp;&nbsp;<a class="delete" onclick="deleFileInfo(this,\'' + json.rows.path  + '\',\'mp32\')" href="javascript:;;">删除</a></div>';
                	$('#musiccell2').append(html);
                	$("#mp32").val(json.rows.path+"?"+json.rows.name)
                }
                else {
    	            dialogMsg(json.message, 0);
                }
            }
        };
        upload(option);
    }
	function upload(option) {
	    $.ajaxFileUpload({
	        url: option.url,
	        secureuri: false, //类型img file  //单文件上传，将之前的文件删除
	        dataType: 'text',
	        fileElementId: option.id,
	        success: function (data, status) {
	            var json = JSON.parse(data);
	            if (option.callback)
	                option.callback(json);
	        },
	        error: function (data, status, e) {
	        }
	    });
	}
	function deleFileInfo(obj, path,objId) {
		$(obj).parent().remove();
		$('#'+objId).val('');
    }
</script>
</head>
<body>
	<form id="form1">
		<input id="id" name="id" value="${chapter.id}" type="hidden" />
		<div style="margin-left: 10px; margin-right: 10px;">
			<div id="BaseInfo" class="tab-pane active"
				style="padding-right: 30px;">
				<table class="form">
					<tr>
						<td class="formTitle">题目类型<font face="宋体">*</font></td>
						<td class="formValue">
							<div id="drivertype" type="select" class="ui-select ui-underline" isvalid="yes" checkexpession="NotNull">
								<ul>
									<c:forEach items="${CarTypeList}" var="entry">
										<li data-value="${entry.value}">${entry.value}</li>
									</c:forEach>
								</ul>
							</div>
						</td>
						<td class="formTitle">科目类型<font face="宋体">*</font></td>
						<td class="formValue">
							<div id="subtype" type="select" class="ui-select ui-underline" isvalid="yes" checkexpession="NotNull">
								<ul>
									<li data-value="科目一">科目一</li>
									<li data-value="科目四">科目四</li>
								</ul>
							</div>
						</td>
					</tr>
					<tr>
						<td class="formTitle">章节<font face="宋体">*</font></td>
						<td class="formValue">
							<div id="chapterid" type="select" class="ui-select ui-underline" isvalid="yes" checkexpession="NotNull">
								<ul id="ulchapterid">
									<li data-value="">===请选择===</li>
								</ul>
							</div>
						</td>
						<td class="formTitle">题型<font face="宋体">*</font></td>
						<td class="formValue">
							<div id="specialid" type="select" class="ui-select ui-underline" isvalid="yes" checkexpession="NotNull">
								<ul id="ulspecialid">
									<li data-value="">===请选择===</li>
								</ul>
							</div>
						</td>
					</tr>
					<tr>
						<td class="formTitle">类型<font face="宋体">*</font></td>
						<td class="formValue">
							<div id="type" type="select" class="ui-select ui-underline" isvalid="yes" checkexpession="NotNull">
								<ul>
									<li data-value="1">判断题</li>
									<li data-value="2">单选题</li>
									<li data-value="3">多选题</li>
								</ul>
							</div>
						</td>
						<td class="formTitle">题目图片</td>
						<td class="formValue" rowspan="4">
	                    	<div>
	                    		<img id="imgimg" width="90" height="90" src="${ctx}/Content/img/image.png"/>
	                    		<input id="img" name="img" type="hidden" value="${chapter.img}"/>
	                    	</div>
	                        <div style="margin-top:5px;">
	                        	<input id="myfile1" type="file" class="file"/>
	                        	<a id="btn_Search1" class="btn btn-primary">选择图片</a>
	                        	<a id="btn_del1" onclick="delImg('1')" class="btn btn-primary">删除图片</a>
	                        </div>
						</td>
					</tr>
					<tr>
						<td class="formTitle">题目<font face="宋体">*</font></td>
						<td class="formValue">
							<input id="question" name="question" isvalid="yes" value="${chapter.question}" type="text" class="form-control" checkexpession="NotNull"/>
						</td>
					</tr>
					<tr>
						<td class="formTitle">答案一<font face="宋体">*</font></td>
						<td class="formValue">
							<input id="an1" name="an1" isvalid="yes" value="${chapter.an1}" type="text" class="form-control" checkexpession="NotNull"/>
						</td>
					</tr>
					<tr>
						<td class="formTitle">答案二<font face="宋体">*</font></td>
						<td class="formValue">
							<input id="an2" name="an2" isvalid="yes" value="${chapter.an2}" type="text" class="form-control" checkexpession="NotNull"/>
						</td>
					</tr>
					<tr id="trAnswer" style="display:none;">
						<td class="formTitle">答案三<font face="宋体">*</font></td>
						<td class="formValue">
							<input id="an3" name="an3" isvalid="yes" value="${chapter.an3}" type="text" class="form-control"/>
						</td>
						<td class="formTitle">答案四<font face="宋体">*</font></td>
						<td class="formValue">
							<input id="an4" name="an4" isvalid="yes" value="${chapter.an4}" type="text" class="form-control"/>
						</td>
					</tr>
					<tr>
						<td class="formTitle">答案<font face="宋体">*</font></td>
						<td class="formValue">
							<span class="span01"><input id="answertrue1" type="checkbox" name="answertrue" value="1"/>答案一</span>
							<span class="span01"><input id="answertrue2" type="checkbox" name="answertrue" value="2"/>答案二</span>
							<span class="span01"><input id="answertrue3" type="checkbox" name="answertrue" value="3"/>答案三</span>
							<span class="span01"><input id="answertrue4" type="checkbox" name="answertrue" value="4"/>答案四</span>
						</td>
						<td class="formTitle">解析图片</td>
						<td class="formValue" rowspan="3">
	                    	<div>
	                    		<img id="imgjqimg" width="90" height="90" src="${ctx}/admin/img/image.png"/>
	                    		<input id="jqimg" name="jqimg" type="hidden" value="${chapter.jqimg}"/>
	                    	</div>
	                        <div style="margin-top:5px;">
	                        	<input id="myfile2" type="file" class="file"/>
	                        	<a id="btn_Search2" class="btn btn-primary">选择图片</a>
	                        	<a id="btn_del2" onclick="delImg('2')" class="btn btn-primary">删除图片</a>
	                        </div>
						</td>
					</tr>
					<tr>
						<td class="formTitle">题目解析<font face="宋体">*</font></td>
						<td class="formValue">
							<input id="helptip" name="helptip" isvalid="yes" value="${chapter.helptip}" type="text" class="form-control" checkexpession="NotNull"/>
						</td>
					</tr>
					<tr>
						<td class="formTitle">技巧<font face="宋体">*</font></td>
						<td class="formValue">
							<input id="jqdetail" name="jqdetail" isvalid="yes" value="${chapter.jqdetail}" type="text" class="form-control" checkexpession="NotNull"/>
						</td>
					</tr>
					<tr id="spancollectionmoney">
						<td class="formTitle">排序</td>
						<td class="formValue">
							<input id="xorder" style=""
								name="xorder" value="${chapter.xorder}" type="text"
								class="form-control" placeholder="请输入排序" isvalid="yes" checkexpession="Num"/>
						</td>
					</tr>
					<tr>
						<td class="formTitle">解析语音</td>
						<td class="formValue" colspan="3">
							<input id="mp3" name="mp3" value="${chapter.mp3}" type="hidden" class="form-control"/>
							<input id="file" name="file" type="file" class="default" onchange="previewMusic(this)"  style="position: absolute;width: 98px;height: 33px;cursor: pointer;outline: none;opacity: 0;"/>
							<a id="lr-replace" class="btn btn-default"><i class="fa fa-refresh"></i>&nbsp;选择文件</a>
							<div id="musiccell"></div>
						</td>
					</tr>
					<tr>
						<td class="formTitle">题目语音</td>
						<td class="formValue" colspan="3">
							<input id="mp32" name="mp32" value="${chapter.mp32}" type="hidden" class="form-control"/>
							<input id="file2" name="file2" type="file" class="default" onchange="previewMusic2(this)"  style="position: absolute;width: 98px;height: 33px;cursor: pointer;outline: none;opacity: 0;"/>
							<a id="lr-replace2" class="btn btn-default"><i class="fa fa-refresh"></i>&nbsp;选择文件</a>
							<div id="musiccell2"></div>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</form>
    <script src="${ctx}/admin/scripts/exif.js"></script>
    <script>
    	var input = document.getElementById("myfile1");
    	var input2 = document.getElementById("myfile2");
    	var maxsize = 2 * 1024;
        var canvas = document.createElement("canvas"); 
    	var ctx = canvas.getContext('2d'); 
    	//瓦片canvas 
    	var tCanvas = document.createElement("canvas"); 
    	
    	var tctx = tCanvas.getContext("2d"); 

        if(typeof FileReader === 'undefined'){
            result.innerHTML = "<p class='warn'>抱歉，你的浏览器不支持 FileReader</p>";
            input.setAttribute('disabled','disabled');
        }else{
            input.addEventListener('change',readFile,false);
            input2.addEventListener('change',readFile2,false);
        }
        
        function readFile(){  
            for(var i=0;i<this.files.length;i++){
                var file = this.files[i];
                if(!/image\/\w+/.test(file.type) && !/image%3A\w+/.test(file.name)){
                    alert("请确保文件为图像类型");
                    return false;
                }
                if (file.size > 1024 * 1024 * 10) {
                    alert('图片大小不能超过10M'); 
                    return false;
                }
                $('.app-mask').show();
                var Orientation = null;
                EXIF.getData(file, function() {  
                EXIF.getAllTags(file);   
                Orientation = EXIF.getTag(file, 'Orientation');
                });
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function(e){  
                    $('#imgimg').attr('src',this.result);
                    var data = "";
                   if (file.size <= maxsize) {
                       data = this.result;
                       $.post('${ctx}/upload/imagestr',{imgData:data,filetype:'1',type:"subinfo"},function(data){
                       	data = JSON.parse(data);
                       	$('#img').val(data.message);
                       });
                   }else{
                      var myImg = new Image(); 
                      myImg.src = this.result;
                      myImg.onload=function(){
                          data = compress(myImg);
                          $.post('${ctx}/upload/imagestr',{imgData:data,filetype:'1',type:"subinfo"},function(data){
                          	data = JSON.parse(data);
                           	$('#img').val(data.message);
                          });
                      }
                  }
                }
            }
        }
        
        function readFile2(){  
            for(var i=0;i<this.files.length;i++){
                var file = this.files[i];
                if(!/image\/\w+/.test(file.type) && !/image%3A\w+/.test(file.name)){
                    alert("请确保文件为图像类型");
                    return false;
                }
                if (file.size > 1024 * 1024 * 10) {
                    alert('图片大小不能超过10M'); 
                    return false;
                }
                $('.app-mask').show();
                var Orientation = null;
                EXIF.getData(file, function() {  
                EXIF.getAllTags(file);   
                Orientation = EXIF.getTag(file, 'Orientation');
                });
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function(e){  
                    $('#imgjqimg').attr('src',this.result);
                    var data = "";
                    if (file.size <= maxsize) {
                        data = this.result;
                        $.post('${ctx}/upload/imagestr',{imgData:data,filetype:'2',type:"subinfo"},function(data){
                        	data = JSON.parse(data);
                        	$('#jqimg').val(data.message);
                        });
                    }else{
                       var myImg = new Image(); 
                       myImg.src = this.result;
                       myImg.onload=function(){
                           data = compress(myImg);
                           $.post('${ctx}/upload/imagestr',{imgData:data,filetype:'2',type:"subinfo"},function(data){
                           	data = JSON.parse(data);
                        	$('#jqimg').val(data.message);
                           });
                       }
                   }
                }
            }
        }
        function compress(img) {
            var initSize = img.src.length; 
            var height = img.naturalHeight; 
            var width = img.naturalWidth; 
            //alert(width);
            //alert(height);

            //如果图片大于四百万像素，计算压缩比并将大小压至400万以下 
            var ratio; 
            if ((ratio = width * height / 4000000)>1) { 
             ratio = Math.sqrt(ratio); 
             width /= ratio; 
             height /= ratio; 
            }else { 
             ratio = 1; 
            }

            canvas.width = width; 
            canvas.height = height; 

            //        铺底色 
            ctx.fillStyle = "#fff"; 
            ctx.fillRect(0, 0, canvas.width, canvas.height); 

            //如果图片像素大于100万则使用瓦片绘制 
            var count; 
            if ((count = width * height / 1000000) > 1) { 
             count = ~~(Math.sqrt(count)+1); //计算要分成多少块瓦片 

            //            计算每块瓦片的宽和高 
             var nw = ~~(width / count); 
             var nh = ~~(height / count); 

             tCanvas.width = nw; 
             tCanvas.height = nh; 

             for (var i = 0; i < count; i++) { 
                 for (var j = 0; j < count; j++) { 
                     tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh); 

                     ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh); 
                 } 
             } 
            } else { 
             ctx.drawImage(img, 0, 0, width, height); 
            } 

            //进行最小压缩 
            var ndata = canvas.toDataURL('image/jpeg', 0.1); 

            tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0; 

            return ndata; 
        }
        function  delImg(type){
        	if(type=='1'){
        		$('#imgimg').attr('src','');
        		$('#img').val('');
        	}
        	else if(type=='2'){
        		$('#imgjqimg').attr('src','');
        		$('#jqimg').val();
        	}
        }
    </script>
</body>
</html>
